<!-- eslint-disable prettier/prettier -->
<template>
  <div class="container">
    <Breadcrumb :items="['menu.holes', '漏洞列表']" />
    <div class="content">
      <div class="holesListHead">
        <div class="holesListHeadLeft">

          <div>
            <span>企业：</span>
            <a-select
              :default-value="['全部']"
              :style="{width:'320px'}"
              :size="'size'"
              placeholder="Please select ..."
              multiple>
              <a-option>全部</a-option>
              <a-option>Shanghai</a-option>
              <a-option>Guangzhou</a-option>
              <a-option disabled>Disabled</a-option>
              <a-option>Shenzhen</a-option>
              <a-option>Chengdu</a-option>
              <a-option>Wuhan</a-option>
              </a-select>
          </div>

          <div class="holesListHeadLeftitem">
            <span>支撑单位：</span>
            <a-select
              :default-value="['全部']"
              :style="{width:'320px'}"
              :size="'size'"
              placeholder="Please select ..."
              multiple>
              <a-option>全部</a-option>
              <a-option>Shanghai</a-option>
              <a-option>Guangzhou</a-option>
              <a-option disabled>Disabled</a-option>
              <a-option>Shenzhen</a-option>
              <a-option>Chengdu</a-option>
              <a-option>Wuhan</a-option>
            </a-select>
          </div>

          <div>
            <a-input-search class="searchInput" :style="{width:'320px'}" placeholder="请输入目标" search-button/>
          </div>

          <div class="holesBtn">
            <a-button type="primary">查询</a-button>
            <a-button>重置</a-button>
          </div>

        </div>

        <div>
          <a-button type="primary">通知</a-button>
          <a-button @click="handleClick">新建</a-button>
        </div>

      </div>
    </div>

      <a-table
        :columns="columns"
        :data="form.noData ? [] : data"
        :bordered="form.border"
        :hoverable="form.hover"
        :stripe="form.stripe"
        :loading="form.loading"
        :show-header="form.tableHeader"
        :row-selection="form.checkbox ? rowSelection : undefined"
      >
        <template #columns>
          <a-table-column title="任务ID" data-index="key" />
          <a-table-column title="漏扫目标" data-index="name" />
          <a-table-column title="所属企业" data-index="otherName" />
          <a-table-column title="支撑单位" data-index="sort" />
          <a-table-column title="任务类型" data-index="sort" />
          <a-table-column title="漏扫结果" data-index="sort" />
          <a-table-column title="状态" data-index="sort" />

          <a-table-column title="操作" data-index="status">
            <template #cell>
              <a-space>
                <a-button type="text">查看</a-button>
                <a-button type="text">下载</a-button>
              </a-space>
            </template>
          </a-table-column>
        </template>
      </a-table>

  </div>
  <a-modal v-model:visible="visible" title="新建任务" @cancel="handleCancel" @before-ok="handleBeforeOk">
    <a-form :model="form">
      <a-form-item field="name" label="创建人：">
        <a-input v-model="form.user" disabled: />
      </a-form-item>

      <a-form-item field="post" label="漏扫目标：">
        <a-select v-model="form.post">
          <a-option value="post1">https://baidu.com/</a-option>
          <a-option value="post2">https://baidu.com/</a-option>
          <a-option value="post3">https://baidu.com/</a-option>
          <a-option value="post4">https://baidu.com/</a-option>
        </a-select>
      </a-form-item>
      <a-form-item field="name" label="任务备注：">
        <a-input v-model="form.name" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue"
const visible = ref(false)
const form = reactive({
  border: true,
  borderCell: false,
  hover: true,
  stripe: true,
  checkbox: true,
  loading: false,
  tableHeader: true,
  noData: false,
  name: "",
  post: "",
  user: ""
})

const rowSelection = reactive({
  type: "checkbox",
  showCheckedAll: true
})

const columns = [
  {
    title: "序号",
    dataIndex: "key"
  },
  {
    title: "角色名称",
    dataIndex: "name"
  },
  {
    title: "别名",
    dataIndex: "otherName"
  },
  {
    title: "排序",
    dataIndex: "sort"
  },
  {
    title: "状态",
    dataIndex: "status"
  },
  {
    title: "创建时间",
    dataIndex: "time"
  },
  {
    title: "备注",
    dataIndex: "email"
  }
]

const data = [
  {
    key: "1",
    name: "Jane Doe",
    otherName: "J.D.",
    sort: 23000,
    status: "启用",
    time: "2021-01-01 12:00:00",
    email: "jane.doe@example.com"
  },
  {
    key: "2",
    name: "Jane Doe",
    otherName: "J.D.",
    sort: 23000,
    status: "启用",
    time: "2021-01-01 12:00:00",
    email: "jane.doe@example.com"
  },
  {
    key: "3",
    name: "Jane Doe",
    otherName: "J.D.",
    sort: 23000,
    status: "启用",
    time: "2021-01-01 12:00:00",
    email: "jane.doe@example.com"
  },
  {
    key: "4",
    name: "Jane Doe",
    otherName: "J.D.",
    sort: 23000,
    status: "启用",
    time: "2021-01-01 12:00:00",
    email: "jane.doe@example.com"
  },
  {
    key: "5",
    name: "Jane Doe",
    otherName: "J.D.",
    sort: 23000,
    status: "启用",
    time: "2021-01-01 12:00:00",
    email: "jane.doe@example.com"
  }
]
const handleClick = () => {
  visible.value = true
}

const handleBeforeOk = (done: any) => {
  console.log(form)
  window.setTimeout(() => {
    done()
    // prevent close
    // done(false)
  }, 3000)
}

const handleCancel = () => {
  visible.value = false
}
</script>

<style scoped lang="less">
.container {
  padding: 0 20px 20px 20px;
}
.content {
  // margin: 20px;
}
.holesListHead {
  background-color: #fff;
  // margin: 20px;
  padding: 20px;
}
.holesListHeadLeft {
  display: flex;
}
.holesListHeadLeftitem {
  margin-left: 20px;
}
.holesBtn {
  margin-left: 20px;
}
.searchInput {
  width: 50px;
}
</style>
